<template>
  <applyCommon :applyForm="form">
    <template #apply-1>
      <el-form-item label="加班名称" prop="title">
        <el-input v-model="form.title" placeholder="加班名称" class="w300"></el-input>
      </el-form-item>

      <el-row type="flex">
        <el-col :span="6">
          <el-form-item label="加班时间" prop="date">
            <el-date-picker
              v-model="form.date"
              type="date"
              placeholder="选择日期"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="加班人数" prop="peopleNum">
            <el-input-number v-model="form.peopleNum" @change="calculateFee" label="加班人数"></el-input-number>
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item label="加班金额" prop="money">
        <el-input v-model="form.money" placeholder="加班金额" class="w300" disabled></el-input>
      </el-form-item>


    </template>

  </applyCommon>
</template>

<script>
    import applyCommon from "./applyCommon";
    export default {
        name: "applyWork",//加班
        data(){
            return {
                form:{
                    xmid:'',
                    batch_id: '',
                    company: '',
                    dept: '',
                    ticketName: '',
                    desc: '',
                    created_at: '',
                    title:'',
                    peopleNum: 0,
                    date:'',
                    money: 0.00,
                    type:5,
                },
            }
        },
        components: {applyCommon},
        methods:{
            calculateFee(){
                this.form.money = this.form.peopleNum * 30;
            }
        },
    }
</script>

<style scoped>

</style>
